<div class="container">

  <div class="header">
    <div class="header-background"></div>
    <div class="main">
      <div class="row">
        <div class="col-xs-2"><a [routerLink]="['/playbooks']" class="logo"></a></div>
        <ul class="col-xs-8 navigation">
          <li class="menu-item">
            <a [routerLink]="['/playbooks']" routerLinkActive="active">Playbooks</a>
          </li>
          <li class="menu-item" [shownFor]="'view_playbook_configuration'">
            <a [routerLink]="['/configurations']" routerLinkActive="active">Configurations</a>
          </li>
          <li class="menu-item" [shownFor]="'view_cluster'">
            <a [routerLink]="['/clusters']" routerLinkActive="active">Clusters</a>
          </li>
          <li class="menu-item" [shownFor]="'view_server'">
            <a [routerLink]="['/servers']" routerLinkActive="active">Servers</a>
          </li>
          <li class="menu-item" [shownFor]="'view_execution'">
            <a [routerLink]="['/executions']" routerLinkActive="active">Executions</a>
          </li>
          <li class="menu-item" [shownFor]="['view_user', 'view_role']">
            <a [routerLink]="['/admin', adminSubroute]" routerLinkActive="active">Users Management</a>
          </li>
        </ul>
        <div class="col-xs-2">
          <div class="current-user" *ngIf="getLoggedUserName()">
            <a><span class="glyphicon user-icon"></span> {{getLoggedUserName()}}</a>
            / <a (click)="logout()">Logout</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="main">
    <div class="alert row alert-danger" *ngIf="errors.length">
      <button class="close" aria-label="Close" (click)="dismissErrors()">
        <span aria-hidden="true">&times;</span>
      </button>
      <p *ngFor="let error of errors">
        <strong>{{error.error}}:</strong> {{error.message}}
      </p>
    </div>
    <router-outlet></router-outlet>
  </div>

  <div class="modal fade" id="confirm" tabindex="-1" role="dialog" aria-hidden="true"  aria-labelledby="modalLabel">
    <div id="modal-dialog" class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-body"><h1>{{confirmationText}}</h1></div>
        <div class="modal-footer">
          <button id="discard" class="btn btn-default" (click)="hideConfirmation()">
            Discard
          </button>
          <button class="btn btn-primary" (click)="proceed()">
            Confirm
          </button>
        </div>
      </div>
    </div>
  </div>
</div>